---
{
	"title": "Data Picture",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Conversion de Picturefill guidé par l'événement.",
	"tag": "data-picture",
	"parentdir": "data-picture",
	"altLangPrefix": "data-picture",
	"dateModified": "2025-05-20"
}
---

<section>
	<h2>Intention</h2>
	<p>Conversion de <a href="https://github.com/scottjehl/picturefill">Picturefill</a> guidé par l'événement.</p>
</section>

<section>
	<h2>Caractéristiques</h2>
	<section>
		<h3>Largeur de navigateur</h3>
		<p>Cet exemple utilise <a href="https://www.w3.org/TR/css3-mediaqueries/#width">min-width</a> afin de déterminer l'image à afficher. Redimensionner la fenêtre de navigateur pour voir les différentes images qui chargent.</p>

		<figure>
			<span data-pic="data-pic" data-alt="Colline du Parlement" data-class="img-responsive">
				<!-- Image par défaut : l'élément <div [data-src]> sans attribut data-media est affiché quand :
					1. Aucun des autres requêtes médias <div [data-src]> correspond.
					2. Le navigateur ne supporte pas les requêtes médias CSS -->
				<span data-src="demo/img/parliament-hill-large.jpg"></span>

				<!-- Images pour les navigateurs qui supportent les requêtes médias CSS -->
				<span data-src="demo/img/parliament-hill-small.jpg" data-media="(min-width: 0px)"></span>
				<span data-src="demo/img/parliament-hill-medium.jpg" data-media="(min-width: 768px)"></span>
				<span data-src="demo/img/parliament-hill-large.jpg" data-media="(min-width: 992px)"></span>
				<span data-src="demo/img/parliament-hill-extralarge.jpg" data-media="(min-width: 1200px)"></span>

				<!-- Contenu alternatif pour les navigateurs non-JS. -->
				<noscript><img src="demo/img/parliament-hill-large.jpg" alt="Colline du Parlement"></noscript>
			</span>
			<figcaption>
				<p>Photo par <a href="https://www.flickr.com/photos/intercultura/6130311384">Noema Pérez</a>, autorisé sous licence <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr_CA">Creative Commons</a>.</p>
			</figcaption>
		</figure>

		<details class="wb-prettify all-pre linenums">
			<summary>Visualiser le code</summary>
			<pre><code>&lt;figure&gt;
	&lt;span data-pic="data-pic" data-alt="Colline du Parlement" data-class="img-responsive"&gt;
		&lt;!-- Image par défaut : l'élément &lt;div [data-src]&gt; sans attribut data-media est affiché quand&#160;:
				1. Aucun des autres requêtes médias &lt;div [data-src]&gt; correspond.
				2. Le navigateur ne supporte pas les requêtes médias CSS --&gt;
		&lt;span data-src="demo/img/parliament-hill-large.jpg"&gt;&lt;/span&gt;

		&lt;!-- Images pour les navigateurs qui supportent les requêtes médias CSS --&gt;
		&lt;span data-src="demo/img/parliament-hill-small.jpg" data-media="(min-width: 0px)"&gt;&lt;/span&gt;
		&lt;span data-src="demo/img/parliament-hill-medium.jpg" data-media="(min-width: 500px)"&gt;&lt;/span&gt;
		&lt;span data-src="demo/img/parliament-hill-large.jpg" data-media="(min-width: 960px)"&gt;&lt;/span&gt;
		&lt;span data-src="demo/img/parliament-hill-extralarge.jpg" data-media="(min-width: 1200px)"&gt;&lt;/span&gt;

		&lt;!-- Contenu alternatif pour les navigateurs non-JS --&gt;
		&lt;noscript&gt;&lt;img src="demo/img/parliament-hill-large.jpg" alt="Parliament Hill"/&gt;&lt;/noscript&gt;
	&lt;/span&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Photo par &lt;a href="https://www.flickr.com/photos/intercultura/6130311384"&gt;Noema Pérez&lt;/a&gt;, autorisé sous licence &lt;a href="https://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr_CA"&gt;Creative Commons&lt;/a&gt;.&lt;/p&gt;
	&lt;/figcaption&gt;</code></pre>
		</details>
	</section>

	<section>
		<h3>Haute densité de pixels</h3>
		<p>Cet exemple utilise <a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="Lisez à propos des requêtes médias à haute résolution">deux requêtes médias</a> pour servir des images à haute résolution à des appareils qui en bénéficieront (p.ex. écrans Retina).</p>

		<figure>
			<span data-pic="data-pic" data-alt="False Kiva dans les Canyonlands" data-class="img-responsive">
				<!-- Images pour différentes résolutions de l'appareil -->
				<span data-src="demo/img/cave-low-res.jpg"></span>
				<span data-src="demo/img/cave-high-res.jpg" data-media="(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)"></span>

				<!-- Contenu alternatif pour les navigateurs non-JS -->
				<noscript><img src="demo/img/cave-low-res.jpg" alt="False Kiva dans les Canyonlands"></noscript>
			</span>
			<figcaption>
				<p>Photo par <a href="https://www.flickr.com/photos/snowpeak/7351510924/">snowpeak</a>, autorisé sous licence <a href="https://creativecommons.org/licenses/by/2.0/">Creative Commons</a>.</p>
			</figcaption>
		</figure>

		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;figure&gt;
	&lt;span data-pic="data-pic" data-alt="False Kiva dans les Canyonlands" data-class="img-responsive"&gt;
		&lt;!-- Images pour différentes résolutions de l'appareil --&gt;
		&lt;span data-src="demo/img/cave-low-res.jpg"&gt;&lt;/span&gt;
		&lt;span data-src="demo/img/cave-high-res.jpg" data-media="(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)"&gt;&lt;/span&gt;

		&lt;!-- Contenu alternatif pour les navigateurs non-JS --&gt;
		&lt;noscript&gt;&lt;img src="demo/img/cave-low-res.jpg" alt="False Kiva dans les Canyonlands"/&gt;&lt;/noscript&gt;
	&lt;/span&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Photo par &lt;a href="https://www.flickr.com/photos/snowpeak/7351510924/"&gt;snowpeak&lt;/a&gt;, autorisé sous licence &lt;a href="https://creativecommons.org/licenses/by/2.0/"&gt;Creative Commons&lt;/a&gt;.&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
		</details>
	</section>
</section>
